import 'package:bruno/bruno.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import '../../home/AppLocale.dart';

class DateRangePickerComponent extends StatefulWidget {
  final String title;
  final double? width; // 新增宽度属性
  final DateTime? initialStartDateTime;
  final DateTime? initialEndDateTime;
  final Function(DateTime? startDateTime, DateTime? endDateTime)? onChanged;

  const DateRangePickerComponent({
    Key? key,
    required this.title,
    this.width, // 可选参数
    this.initialStartDateTime,
    this.initialEndDateTime,
    this.onChanged,
  }) : super(key: key);

  @override
  State<DateRangePickerComponent> createState() => _DateRangePickerComponentState();
}

class _DateRangePickerComponentState extends State<DateRangePickerComponent> {
  late DateTime? _startDateTime;
  late DateTime? _endDateTime;

  @override
  void initState() {
    super.initState();
    _startDateTime = widget.initialStartDateTime ?? DateTime.now();
    _endDateTime = widget.initialEndDateTime ?? DateTime.now().add(const Duration(hours: 1));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width, // 使用传入的宽度
      margin: const EdgeInsets.symmetric(vertical: 10),
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 1,
            blurRadius: 5,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(height: 10),
          _buildSelectedTimeDisplay(),
          const SizedBox(height: 10),
          _buildTimePickers(),
        ],
      ),
    );
  }

  Widget _buildSelectedTimeDisplay() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.1),
            spreadRadius: 1,
            blurRadius: 3,
            offset: const Offset(0, 1),
          ),
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            _startDateTime != null
                ? '${_formatTime(_startDateTime!)}'
                : '未选择',
            style: TextStyle(
              fontSize: 32,
              fontWeight: FontWeight.w600,
              color: Colors.black,
            ),
          ),
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: Text(
              "-",
              style: TextStyle(fontSize: 24, color: Colors.grey),
            ),
          ),
          Text(
            _endDateTime != null
                ? '${_formatTime(_endDateTime!)}'
                : '未选择',
            style: TextStyle(
              fontSize: 32,
              fontWeight: FontWeight.w600,
              color: Colors.black,
            ),
          ),
        ],
      ),
    );
  }

  String _formatTime(DateTime dateTime) {
    return '${dateTime.hour.toString().padLeft(2, '0')}:'
        '${dateTime.minute.toString().padLeft(2, '0')}';
  }

  Widget _buildTimePickers() {
    return Container(
      height: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
      ),
      child: Row(
        children: [
          Expanded(
            child: Column(
              children: [
                Container(
                  padding: const EdgeInsets.all(8),
                  child: Text(
                    AppLocale.text('d_kaishishijain'),
                    style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: Colors.black),
                  ),
                ),
                Expanded(
                  child: CupertinoDatePicker(
                    mode: CupertinoDatePickerMode.time,
                    minuteInterval: 1,
                    use24hFormat: true,
                    initialDateTime: _startDateTime ?? DateTime.now(),
                    onDateTimeChanged: (dateTime) {
                      setState(() {
                        _startDateTime = dateTime;
                        if (_endDateTime != null && _startDateTime!.isAfter(_endDateTime!)) {
                          _endDateTime = _startDateTime!.add(const Duration(hours: 1));
                        }
                      });
                      widget.onChanged?.call(_startDateTime, _endDateTime);
                    },
                  ),
                ),
              ],
            ),
          ),
          Container(
            width: 1,
            height: double.infinity,
            color: Colors.grey.withOpacity(0.1),
          ),
          Expanded(
            child: Column(
              children: [
                Container(
                  padding: const EdgeInsets.all(8),
                  child: Text(
                    AppLocale.text('d_jieshushijain'),
                    style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: Colors.black),
                  ),
                ),
                Expanded(
                  child: CupertinoDatePicker(
                    mode: CupertinoDatePickerMode.time,
                    minuteInterval: 1,
                    use24hFormat: true,
                    initialDateTime: _endDateTime ?? DateTime.now().add(const Duration(hours: 1)),
                    onDateTimeChanged: (dateTime) {
                      setState(() {
                        _endDateTime = dateTime;
                        if (_startDateTime != null && _endDateTime!.isBefore(_startDateTime!)) {
                          _startDateTime = _endDateTime!.subtract(const Duration(hours: 1));
                        }
                      });
                      widget.onChanged?.call(_startDateTime, _endDateTime);
                    },
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}